<template>
	<view class="container">
		<tui-picture-cropper :lockRatio="true" :imageUrl="imageUrl" @ready="ready" @cropper="cropper"></tui-picture-cropper>
	</view>
</template>

<script>
import tuipic from '../../../custom-components/tui-picture-cropper/tui-picture-cropper'
export default {
	components: {
	  "tui-picture-cropper": tuipic,
	},
	data() {
		return {
			src: '',
			imageUrl: '' //要裁剪的图片
		};
	},
	
	onLoad(options) {
		this.src = options.src || '';
		//如果从上个页面传值时可显示loading
		this.src &&
			uni.showLoading({
				title: '请稍候...',
				mask: true
			});
	},
	methods: {
		ready() {
			this.imageUrl = this.src;
		},
		cropper(e) {
			uni.showToast({
				icon:'loading',
				title:'上传中'
			})
			uni.uploadFile({
			    url: this.host+'/app/mine/avatarUpload', //仅为示例，非真实的接口地址
			    filePath: e.url,
			    name: 'file',
					header: {
						"token": this.vuex_user && this.vuex_user.token || "",
						"platform":"app"
					},
			    formData: {
			        'user': 'test'
			    },
			    success: (uploadFileRes) => {
						 uni.hideLoading()
							let txurl=JSON.parse(uploadFileRes.data).data;
							this.vuex_user.avatar=txurl
							this.updateUser(this.vuex_user)
							uni.navigateBack()
			    }
			});
		}
	}
};
</script>

<style></style>
